<template>
  <el-dialog
    v-model="modelValue"
    @close="close"
    :title="$t('flowInstance.select')"
  >
    <div class="containers">
      <el-card shadow="never">
        {{ $t("flowInstance.currentSelect", [selectedCount]) }}
        <el-tag closable :type="info" v-if="selectedCount" @close="clearValue">
          {{ selectedInfo.name }}
        </el-tag>
      </el-card>
      <div class="loading" v-if="loading">{{ $t("common.loading") }}</div>
      <div class="canvas" v-else ref="canvas"></div>
    </div>
    <template #footer>
      <el-button @click="onClose">{{ $t("common.cancel") }}</el-button>
      <el-button @click="onOk" type="primary">{{ $t("common.ok") }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
// 引入相关的依赖
import BpmnViewer from "bpmn-js";
// import { xmlStr } from "@/mock/xmlStr";
import { xmlStr } from "../../mock/xmlStr";

import { getFlowBpmn } from "@/api/historyListApi";
import { toRaw } from "vue";

export default {
  name: "自由跳转",
  emits: ["update:modelValue", "update:value", "update:label"],
  props: {
    proInsId: {
      require: true,
      type: String,
    },
    procDefId: {
      type: [String, undefined],
      default: undefined,
    },
  },

  mounted() {
    this.init();
  },
  data() {
    return {
      viewer: null,
      container: null,
      canvas: null,
      loading: false,
      xmlUrl: "",
      defaultXmlStr: xmlStr,
      selectedInfo: {
        name: null,
        value: null,
        id: null,
      },
    };
  },
  computed: {
    selectedCount() {
      return this.selectedInfo.name ? 1 : 0;
    },
  },
  methods: {
    async init() {
      this.loading = true;
      this.$nextTick(() => {
        this.initBpmn();
      });
      this.loading = false;
    },
    onClose() {
      this.$emit("update:modelValue", false);
    },
    clearValue() {
      this.selectedInfo = {
        name: null,
        value: null,
        id: null,
      };
    },
    onOk() {
      this.$emit("update:label", this.selectedInfo.name);
      this.$emit("update:value", this.selectedInfo.id);
      this.onClose();
    },
    addEventBusListener() {
      const viewer = toRaw(this.viewer);
      const eventBus = viewer.get("eventBus"); // 需要使用eventBus
      const eventTypes = ["element.click", "element.changed"]; // 需要监听的事件集合
      eventTypes.forEach((eventType) => {
        eventBus.on(eventType, ({ element }) => {
          console.log(element, "element");
          if (element.type !== "bpmn:Process") {
            this.selectedInfo = element.businessObject;
          }
        });
      });
    },
    initBpmn() {
      // 建模
      const viewer = new BpmnViewer({
        container: this.$refs.canvas,
      });
      this.viewer = viewer;
      this.canvas = viewer.get("canvas");
      this.createNewDiagram();
    },
    async createNewDiagram() {
      const { data } = await getFlowBpmn(this.procDefId);
      this.transformCanvas(data?.content || "");
    },
    transformCanvas(bpmnXmlStr) {
      // 将字符串转换成图显示出来
      toRaw(this.viewer).importXML(bpmnXmlStr, (err) => {
        if (err) {
          console.error(err);
        } else {
          this.success();
        }
        // 让图能自适应屏幕
        const canvas = this.viewer.get("canvas");
        canvas.zoom("fit-viewport");
      });
    },
    success() {
      this.addEventBusListener();
    },
  },
};
</script>

<style>
.loading {
  font-size: 26px;
}
.containers {
  background-color: #ffffff;
  width: 100%;
  height: 400px;
}
.canvas {
  width: 100%;
  height: 200px;
}
.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
  stroke: red !important;
}
</style>
